<template>
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-semibold text-gray-700">我的应用</h1>
    <el-button @click="refreashKBData" >刷新</el-button>
    <el-button @click="tohome">回到主页</el-button>

    <div class="grid grid-cols-4 gap-6 mt-6">
      <div v-for="app in apps" :key="app.kbid" class="bg-white p-6 rounded-lg shadow-lg">
        <div class="flex items-center space-x-6 mb-4">
          <div class="flex-shrink-0">
            <i class="fas fa-folder text-blue-500 text-4xl"></i>
          </div>
          <div>
            <h2 class="text-lg font-semibold text-gray-700">
              {{ app.kbName ? app.kbName : '默认知识库名' }}
            </h2>
            <p class="text-gray-600">{{ app.description?app.description:'暂无介绍' }}</p>
            <button class="mt-4 text-blue-600 hover:underline" @click="toDetail(app.kbid,app.kbName)">详情</button>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end mt-6">
      <button @click="addApp" class="bg-blue-500 text-white px-4 py-2 rounded-md font-semibold hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        + 新建
      </button>
    </div>
  </div>
</template>

<script>
import {createKnowledge, getKnowledges} from "@/api/kbapi.ts";
import {mapActions, mapGetters} from "vuex";

export default {
  name: 'MyAppBox',
  data() {
    return {
      apps: [
        { kbid: 1, kbName: '知识库', description: '这个应用还没写介绍~' },
        { kbid: 2, kbName: '知识库+知识引擎', description: '这个应用还没写介绍~' },
        { kbid: 3, kbName: '问题分析+知识库', description: '这个应用还没写介绍~' },
        { kbid: 4, kbName: '知识引擎+文档', description: '这个应用还没写介绍~' }
      ]
    };
  },

  computed: {
    kbName: {
      get() {
        return this.getKbName;
      },
      set(value) {
        this.setKbName(value);
      }
    },
    ...mapGetters([
      'getKbName'
    ])
  },
  created() {
getKnowledges().then((res) => {
      console.log(res)
      this.apps = res.data
    }).catch((err) => {
      console.log(err)
    });
  },
  methods: {
    tohome() {
      this.$router.push('/')
    },
    ...mapActions([
      'setKbName'
    ]),
    addApp() {

      createKnowledge().then((res) => {
            console.log(res)
            var newApp = {
              kbid: res.data,
              kbName: '新应用',
              description: '这个应用还没写介绍~'
            };
            this.apps.push(newApp);

          }
      ).catch((err) => {
        console.log(err)
      })

    },
    refreashKBData() {
      getKnowledges().then((res) => {
        console.log(res)
        this.apps = res.data
      }).catch((err) => {
        console.log(err)
      });
    },
    toDetail(kbid,kbName) {
      this.kbName=kbName
      console.log(kbName)
      this.$router.push({
        path: '/knDetail'
        , query: {kbId: kbid}
      })
    }
  }
}
</script>

<style scoped>
/* Add any scoped styles if necessary */
</style>
